<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能助手 - 退役军人服务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #1a6df0;
            --navy-blue: #0d2b50;
            --secondary: #ff6b00;
            --light-bg: #f5f7fa;
            --white: #ffffff;
            --gray: #6c757d;
            --text-primary: #333;
            --text-secondary: #666;
            --border: #e5e5e5;
        }

        body {
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            background: var(--light-bg);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: linear-gradient(135deg, var(--navy-blue) 0%, var(--primary) 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-title {
            font-size: 18px;
            font-weight: 600;
        }

        .chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .message {
            display: flex;
            gap: 10px;
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .message.user .message-avatar {
            background: var(--primary);
            color: white;
        }

        .message.ai .message-avatar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 15px;
            border-radius: 12px;
            line-height: 1.5;
            font-size: 14px;
        }

        .message.user .message-content {
            background: var(--primary);
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message.ai .message-content {
            background: var(--white);
            color: var(--text-primary);
            border-bottom-left-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .quick-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .quick-action-btn {
            padding: 6px 12px;
            background: var(--light-bg);
            border: 1px solid var(--border);
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .quick-action-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .input-area {
            background: white;
            padding: 15px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .input-box {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 14px;
            outline: none;
        }

        .send-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
        }

        .typing-indicator {
            display: flex;
            gap: 5px;
            padding: 12px 15px;
            background: var(--white);
            border-radius: 12px;
            width: fit-content;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gray);
            animation: typing 1.4s infinite;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <div class="header-title">AI智能助手</div>
            <i class="fas fa-ellipsis-v" style="cursor: pointer;"></i>
        </div>
    </div>

    <div class="chat-container" id="chatContainer">
        <div class="message ai">
            <div class="message-avatar">
                <i class="fas fa-robot"></i>
            </div>
            <div class="message-content">
                您好！我是AI智能助手，可以帮您：
                <div class="quick-actions">
                    <span class="quick-action-btn">制定旅游行程</span>
                    <span class="quick-action-btn">推荐工作岗位</span>
                    <span class="quick-action-btn">查询优惠政策</span>
                    <span class="quick-action-btn">解答常见问题</span>
                </div>
            </div>
        </div>

        <div class="message user">
            <div class="message-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="message-content">
                我想去北京旅游，帮我制定一个3天的行程
            </div>
        </div>

        <div class="message ai">
            <div class="message-avatar">
                <i class="fas fa-robot"></i>
            </div>
            <div class="message-content">
                好的，我为您推荐一个北京3日游行程，包含退役军人专属优惠：
                <br><br>
                <strong>第一天：</strong>
                <br>上午：天安门广场（退役军人免费）
                <br>下午：故宫博物院（退役军人5折优惠）
                <br>晚上：王府井步行街
                <br><br>
                <strong>第二天：</strong>
                <br>上午：八达岭长城（退役军人免费）
                <br>下午：颐和园（退役军人8折优惠）
                <br><br>
                <strong>第三天：</strong>
                <br>上午：天坛公园（退役军人6折优惠）
                <br>下午：什刹海
                <br><br>
                预计总费用：¥2,580/人（含住宿、交通）
                <br><br>
                需要我为您生成详细报价单吗？
            </div>
        </div>

        <div class="message user">
            <div class="message-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="message-content">
                好的，生成报价单
            </div>
        </div>

        <div class="message ai">
            <div class="message-avatar">
                <i class="fas fa-robot"></i>
            </div>
            <div class="message-content">
                已为您生成报价单，包含：
                <br>• 详细行程安排
                <br>• 酒店预订信息
                <br>• 景点门票价格（含退役军人优惠）
                <br>• 交通费用
                <br><br>
                您可以在"我的参与"中查看，也可以分享给战友一起拼团，享受更多优惠！
            </div>
        </div>
    </div>

    <div class="input-area">
        <input type="text" class="input-box" placeholder="输入您的问题..." id="messageInput">
        <button class="send-btn" onclick="sendMessage()">
            <i class="fas fa-paper-plane"></i>
        </button>
    </div>

    <script>
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            if (!message) return;

            const chatContainer = document.getElementById('chatContainer');
            
            // 添加用户消息
            const userMessage = document.createElement('div');
            userMessage.className = 'message user';
            userMessage.innerHTML = `
                <div class="message-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="message-content">${message}</div>
            `;
            chatContainer.appendChild(userMessage);
            input.value = '';

            // 滚动到底部
            chatContainer.scrollTop = chatContainer.scrollHeight;

            // 显示AI正在输入
            const typingIndicator = document.createElement('div');
            typingIndicator.className = 'message ai';
            typingIndicator.innerHTML = `
                <div class="message-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="typing-indicator">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
            `;
            chatContainer.appendChild(typingIndicator);
            chatContainer.scrollTop = chatContainer.scrollHeight;

            // 模拟AI回复
            setTimeout(() => {
                typingIndicator.remove();
                const aiMessage = document.createElement('div');
                aiMessage.className = 'message ai';
                aiMessage.innerHTML = `
                    <div class="message-avatar">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="message-content">
                        我理解您的需求，正在为您处理中。您可以告诉我更多详细信息，比如预算、人数、偏好等，我会为您提供更精准的建议。
                    </div>
                `;
                chatContainer.appendChild(aiMessage);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }, 1500);
        }

        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>
